import React, { Component } from 'react';
import { List,Scroller,Carousel } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import thunk from 'redux-thunk';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware  } from 'redux';
import fetch from 'isomorphic-fetch';
import './index.scss';


// const fetchReducer =(state={},action={})=>{
// 	const{type,payload} = action;
// 	switch(type){
// 		case 'FETCH_DATA_START':
// 			return Object.assign({},state,{status:'数据请求中...'});
// 		case 'FETCH_DATA_FINISH':
// 			return Object.assign({},state,{status:'数据请求完成',list:payload});
// 		default:
// 			return state;
// 	}
// }
// const store = createStore(fetchReducer,applyMiddleware(thunk));


var Skill = React.createClass({
	getInitialState(){
		return{
			list:[{image:'.ss'}]
		}
	},
	
	componentWillMount(){
		var self =this;
		fetch('../mock/skill.json')
			.then(function (response) {
				return response.json()
			})
			.then(function (json) {
				self.setState({
					list:json
				})
			})
	},
	
    render() {
		this.state.list.map(function (val,index) {
			val.key = index+'xx';
		})
		return (
            <div className="yo-flex">
				<div>
					<Carousel>
						<li className="item"><img className="img" style={{height:104,width:"100%"}} src="../mock/images/html.jpg" /></li>
						<li className="item"><img className="img" style={{height:104,width:"100%"}} src="../mock/images/react.jpg" /></li>
						<li className="item"><img className="img" style={{height:104,width:"100%"}} src="../mock/images/jqueryjpg.jpg" /></li>
					</Carousel>
				</div>
				
                <List
					dataSource={this.state.list}
                    renderItem={(item,i)=>{
						return (
                           <div>
							   <p>
								   {`类别:${item.category}`}
							   </p>
							   <div style={{overflow:"hidden"}}>
								   <dt className="img-wrap" style={{float:"left",width:"15%",marginTop:"2%",marginRight:"2%"}}>
									   <List.LazyImage
										   src={item.image}
										   defaultImage={null}
										   style={{
											   width: '100%',
											   height: 60,
					
										   }}
									   />
								   </dt>
								   <dd style={{float:"left",width:"83%"}}>
									  
									   <p>
										   {`技能名称:${item.name}`}
									   </p>
									   <p>
										   {`使用时间:${item.time}`}
									   </p>
									   <p>
										   {`水平:${item.level}`}
									   </p>
								   </dd>
							   </div>
						   </div>
						);
					}}
                extraClass = {'yo-list-fullscreen'}
            />
            </div>
        )
    }
})



export default Skill;
